<template>
  <div id="WalletIndex">
    <top class="top"></top>
    <card :header="{title:'账户余额 （元）'}" class="wallet">
        <div slot="content" class="card-demo-flex card-demo-content01">
            <div class="price">
                <span>8556.00</span>
            </div>
            <div>
                <router-link to="">充值</router-link>
                <router-link to="">提现</router-link>
            </div>
        </div>
    </card>
    <group>
      <cell>
          <p slot="title" class="num">
              <img width="25" src="../../assets/images/nengyuanbi.png">
              <span>可用能源币<i>26</i>个</span>
          </p>
          <router-link class="go-val" to="/">去兑换</router-link>
      </cell>
    </group>

    <group>
        <x-table :cell-bordered="false" :content-bordered="false" full-bordered class="table-num">
            <tbody>
                <tr>
                    <td colspan="2" class="title">
                        <img width="25" src="../../assets/images/baitiao.png" alt="">
                        <span>我的白条</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class="red">3,500.00 <i>元</i></p>
                        <b>白条可用额度</b>
                    </td>
                    <td>
                        <p class="blue">1,200.00 <i>元</i></p>
                        <b>下月应还</b>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <router-link to="">查看白条记录</router-link>
                    </td>
                </tr>
            </tbody>
        </x-table>
    </group>

    <group>
        <x-table :cell-bordered="false" :content-bordered="false" full-bordered class="table-num">
            <tbody>
                <tr>
                    <td colspan="2" class="title">
                        <img width="25" src="../../assets/images/jiekuan.png" alt="">
                        <span>我的借款</span>
                    </td>
                </tr>
                <tr>
                    <td>
                        <p class="red">3,500.00 <i>元</i></p>
                        <b>可借额度</b>
                        <router-link tag="b" to="">查看还款记录</router-link>
                    </td>
                    <td>
                        <p class="blue">1,200.00 <i>元</i></p>
                        <b>2月1日应还</b>
                        <router-link tag="b" to="">查看还款记录</router-link>
                    </td>
                </tr>
            </tbody>
        </x-table>
    </group>
  </div>
</template>

<script>
  import Top from '../../components/layouts/WalletTop'
  import { Divider, Card , Cell , Group , XTable, LoadMore} from 'vux'
  export default {
    components: {
        Top,
        Group,
        Card,
        Divider,
        Cell,
        XTable,
        LoadMore
    },
    data () {
      return {

      }
    },
    created () {
      let vue = this
      vue.updateTitle('钱包');
      vue.updateGreenRightNum(0);
    },
    mounted(){

    },
    methods: {
        // this.$http.post("/list/UserCenter/ceshi").then((res)=>{
        //     // var res=res.data;
        //     console.log(res);
        // })
        // this.$ajax.get("/api/goods",{
        //           params:param
        //         }).then((res)=>{})
    }
  }
</script>
<style lang="less" scoped>
@hong:#cf0808;
@blue:#1babe3;
// @import '~vux/src/styles/1px.less';
.weui-panel{
    background-color: @hong;
    color: #ffffff;
}
  .card-demo-flex {
  display: flex;
  a{
      display: inline-block;
      padding: 5px 20px;
      border: 1px solid #ffffff;
      border-radius: 5px;
      color: #fff;
  }
}
.card-demo-content01 {
  padding-bottom: 10px;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: left;
  font-size: 12px;
}
.card-demo-flex > div:nth-child(2){
    text-align: right;
    padding-right: 15px;
    a:nth-child(1){
        margin-right: 15px;
    }
}
.card-demo-flex span {
  color: #fff;
}
.price span{
    font-size: 34px;
    padding-left: 15px;
}
.num{
    display: flex;
    align-items: center;
    img{
        margin-right: 5px;
    }
    i{
        color: @hong;
        font-size: 20px;
        margin:0px 3px;
    }
}
.go-val{
    color: @hong;
    font-size: 16px;
}
.title{
    border-bottom: 1px solid #e6e6e6;
    img{
        position: relative;
        top:6px;
    }
    span{
        font-size: 18px;
        color: #333333;
        margin-left: 5px;
    }
}
.vux-table.vux-table-bordered:before,.vux-table:after{
    border:0px !important;
}
.vux-table.vux-table-bordered tr td:last-child:after, .vux-table.vux-table-bordered tr th:last-child:after,.vux-table.vux-table-no-content-bordered tr:last-child td:before{
    border-right-width: 0px !important;
    border-bottom-width:0px !important;
}
.table-num{
    background-color:#fff;
    p{
        font-size: 26px;
        padding-top:20px;
    }
    .red{
        color: @hong;
        i{
            color: @hong;
        }
    }
    .blue{
        color: @blue;
        i{
            color: @blue;
        }
    }
    b{
        margin-top:-10px;
        display: block;
        color: #999999;
        font-size: 12px;
    }
    b:nth-of-type(2){
        color: #333333;
        margin-top: -15px;
    }
    a{
        display: block;
        border:1px solid @blue;
        width: 4.5rem;
        border-radius: 0.5rem;
        height: 40px;
        line-height: 39px;
        color: @blue;
        font-size: 16px;
        margin:10px auto 25px;
    }
}
</style>
